<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
	<!-- 垂直方向对象属性 vertical-align
	     使用方法：1.用于表格中单元格垂直居中
		          2.用于行内元素以及行内快元素的垂直居中
				   【文本和图片垂直居中（对齐）效果】
				   对齐分为四种：基线对齐、顶部对齐
				                居中对齐、底部对齐
					元素种类：块元素、行元素、行内快元素
					块元素特点：独占一行、设置宽高
					行元素特点：一行内显示、不可设置宽高
					网页：元素之间嵌套生成
					行元素与块元素可以任意嵌套
					前提：设置宽高---行套快
					             ---块套块   √
								 ---块套行   √
					前提：一行内显示---行套快  √
								   ---块套块  ×
								   ---块套行  √
								   ---行套行  √
	 -->
	 <style>
	 	im g:nth-child(1){
	 		/* vertical-align:baseline 默认基线对齐*/
			vertical-align: baseline;
	 	}
		/* 问题：派生选择器，特点：找后代  p img*/
	   im g:nth-child(2){
			/* vertical-align:baseline 顶部对齐*/
			vertical-align:top;
			width: 500px;
			height: 500px;
			background: red;
		}
		img.baseline{
			vertical-align: baseline;
		}
		img.top{
			vertical-align: top;
		}
		img.middle{
			vertical-align: middle;
		}
		img.bottom{
			vertical-align: bottom;
		}
	 </style>
	</head>
	<body>
	<!-- 需求结构：4个p、嵌套文字：图片叫什么名字
	                    文字后加img，设定宽高：25~100px
						每个图片后面加：基线对齐、顶部对齐
						居中对齐、底部对齐
	 -->
	 <h1>文本与图片垂直属性</h1>
	 <p>蜡笔小新<img class="baseline" src="img/蜡笔小新1.com.png" alt="蜡笔小新" width="100px" height="100px">基线对齐</p>
	 <p>蜡笔小新<img class="top"     src="img/蜡笔小新2.com.png" alt="蜡笔小新" width="100px" height="100px">顶部对齐</p>
	 <p>蜡笔小新<img class="middle"  src="img/蜡笔小新3.com.png" alt="蜡笔小新" width="100px" height="100px">居中对齐</p>
	 <p>蜡笔小新<img class="bottom"  src="img/蜡笔小新4.com.png" alt="蜡笔小新" width="100px" height="100px">底部对齐</p>
	 <!-- css选择器--抓第一张图片 
	 思路：派生选择器：找后代+伪类选择器：添加效果[错误]
	 错误原因：html结构不符合派生特点：p包含4个img
	 p img:nth-child(1)
	 -->
	
	</body>
</html>